<template>
	<div class="regester fillcontain">
		<transition name="form-fade" mode="in-out">
			<section class="form_contianer">
				<div class="manage_tip">
					企业端注册
				</div>
				<el-form :model="loginForm" :rules="rules" ref="loginForm" class="form">
					<el-form-item prop="phone">
						<el-input v-model="loginForm.phone" placeholder="请输入手机号" class="elinput"><span>dsfsf</span></el-input>
					</el-form-item>
					<el-form-item prop="code" class="iconrow">
						<div class="yzm">获取验证码</div>
						<el-input type="password" placeholder="请输入验证码" class="elinput" v-model="loginForm.code"></el-input>
					</el-form-item>
					<el-form-item prop="name">
						<el-input v-model="loginForm.name" placeholder="请输入企业名称" class="elinput"><span>dsfsf</span></el-input>
					</el-form-item>
					
					<el-form-item prop="password">
						<el-input v-model="loginForm.password" placeholder="请输入密码" class="elinput"><span>dsfsf</span></el-input>
					</el-form-item>
					<div class="caozuo">
						<el-checkbox size='small' v-model="checked">注册为猎头</el-checkbox>
					</div>
					<el-form-item>
						<div class="submit_btn" @click="submitForm('loginForm')">注册并登陆 <img src='../../static/image/wright.png'></div>
					</el-form-item>
				</el-form>
				<div class="tip">
					<div class="item">注：</div>
					<div class="item">普通企业招聘，请在手机上用浏览器打开www.renren.com，
						登陆后完善证件信息。猎头可直接进行搜索招聘人才。</div>
				</div>
			</section>
		</transition>
	</div>
</template>

<script>
	import {
		regester 
	} from '@/api/getData'
	import {
		mapActions,
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				checked: false,
				active: 0,
				loginForm: {
					phone: '',
					code: '',
					name: '',
					userType:'',
					password:''
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, ],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				showLogin: false,
			}
		},
		methods: {
			async submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						if(this.checked==false){
							this.loginForm.userType='company';
						}else{
							this.loginForm.userType='lietou';
						}
						
						const res = await regester(this.loginForm);
						
						if (res.code == 1) {
							this.$message({
								type: 'success',
								message: '注册成功'
							});
							sessionStorage.setItem('token',res.data.token);
							console.log(res.data.token);
							setTimeout(function(){
							  this.$router.push('/zpcenter')	
							},1500)
							
						} else {
							this.$message({
								type: 'error',
								message: res.msg
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请输入正确的用户名密码',
							offset: 100
						});
						return false;
					}
				});
			},
		},
		
	}
</script>
<style>
	.regester .caozuo .el-checkbox__inner {
		border-radius: 50%;
	}
</style>
<style lang="less" scoped>
	@import '../style/mixin';

	.regester {
		background-color: #324057;
		background-image: url(../../static/image/loginbg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		object-fit: fill;
		font-family: Source Han Sans CN;
		font-weight: 400;

		.active {

			border: 1px solid #2050F4 !important;
			box-shadow: 0px 3px 6px rgba(214, 224, 255, 0.16);
			color: #2050F4 !important;
		}

		.caozuo {

			color: #999999;
			font-size: 14px;
			margin: 20px 0px;


		}

		.tip {
			color: #FF4422;
			font-size: 14px;
            display: flex;
			align-items: flex-start;


		}

		.iconrow {
			position: relative;

			.yzm {
				position: absolute;
				top: 0px;
				bottom: 0px;
				right: 20px;
				margin: auto;
				z-index: 999;
				color: #226FFF;
				cursor: pointer;
			}
		}
	

	.manage_tip {
		width: 100%;
		margin-bottom: 29px;
		font-size: 24px;
		color: #333333;
		border-left: 4px solid #226FFF;
		padding-left: 20px;
		box-sizing: border-box;

	}

	.form_contianer {
		width: 498px;
		height: auto;
		box-sizing: border-box;
		padding: 40px 56px 34px 43px;
		background-color: #fff;
		position: absolute;
		right: 36%;
		top: 28%;

		.form {
			padding-right: 102px;
		}

		.submit_btn {
			width: 134px;
			height: 36px;
			line-height: 36px;
			font-size: 16px;
			background-color: #2050F4 !important;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				width: 14px;
				height: 9px;
				margin-left: 10px;
			}
		}
	}
}
	.form-fade-enter-active,
	.form-fade-leave-active {
		transition: all 1s;
	}

	.form-fade-enter,
	.form-fade-leave-active {
		transform: translate3d(0, -50px, 0);
		opacity: 0;
	}
</style>
